<!doctype html>
<html>
  <head>
    <title>返回值控制示例</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      .form-section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      .input-group {
        margin: 10px 0;
      }
      .input-group label {
        display: inline-block;
        width: 100px;
        font-weight: bold;
      }
      .input-group input {
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
      }
      .error {
        color: red;
        font-size: 12px;
        margin-left: 105px;
      }
      .success {
        color: green;
        font-weight: bold;
      }
      .link-demo {
        margin: 10px 0;
      }
      .link-demo a {
        margin-right: 15px;
        color: blue;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>返回值控制演示</h2>

      <!-- 表单验证示例 -->
      <div class="form-section">
        <h3>表单验证（返回值控制提交）</h3>
        <form @submit="handleSubmit">
          <div class="input-group">
            <label>用户名：</label>
            <input v-model="form.username" type="text" placeholder="至少3个字符" />
            <div v-if="errors.username" class="error">{{ errors.username }}</div>
          </div>

          <div class="input-group">
            <label>邮箱：</label>
            <input v-model="form.email" type="email" placeholder="请输入有效邮箱" />
            <div v-if="errors.email" class="error">{{ errors.email }}</div>
          </div>

          <div class="input-group">
            <label>密码：</label>
            <input v-model="form.password" type="password" placeholder="至少6个字符" />
            <div v-if="errors.password" class="error">{{ errors.password }}</div>
          </div>

          <div class="input-group">
            <label></label>
            <button type="submit">提交表单</button>
            <button type="button" @click="resetForm">重置</button>
          </div>
        </form>

        <div v-if="submitMessage" :class="submitSuccess ? 'success' : 'error'">
          {{ submitMessage }}
        </div>
      </div>

      <!-- 链接控制示例 -->
      <div class="form-section">
        <h3>链接跳转控制</h3>
        <div class="link-demo">
          <a href="https://www.baidu.com" @click="handleLinkClick($event, 'baidu')">
            百度（总是允许）
          </a>
          <a href="https://www.google.com" @click="handleLinkClick($event, 'google')">
            Google（需要确认）
          </a>
          <a href="https://www.example.com" @click="handleLinkClick($event, 'example')">
            Example（总是阻止）
          </a>
        </div>
        <p>点击状态：{{ linkClickStatus }}</p>
      </div>

      <!-- 右键菜单控制示例 -->
      <div class="form-section">
        <h3>右键菜单控制</h3>
        <div
          style="
            width: 300px;
            height: 150px;
            background: #f0f0f0;
            border: 1px solid #ccc;
            padding: 20px;
          "
          @contextmenu="handleContextMenu"
        >
          <p>在这个区域右键点击</p>
          <p>
            控制模式：
            <label>
              <input type="radio" v-model="contextMenuMode" value="allow" />
              允许
            </label>
            <label>
              <input type="radio" v-model="contextMenuMode" value="block" />
              阻止
            </label>
            <label>
              <input type="radio" v-model="contextMenuMode" value="custom" />
              自定义
            </label>
          </p>
        </div>
        <p>右键状态：{{ contextMenuStatus }}</p>
      </div>
    </div>

    <script>
      const { createApp, ref, reactive } = Vue

      createApp({
        setup() {
          const form = reactive({
            username: '',
            email: '',
            password: ''
          })

          const errors = reactive({})
          const submitMessage = ref('')
          const submitSuccess = ref(false)
          const linkClickStatus = ref('')
          const contextMenuMode = ref('allow')
          const contextMenuStatus = ref('')

          const validateForm = () => {
            // 清空之前的错误
            Object.keys(errors).forEach(key => delete errors[key])

            let isValid = true

            // 验证用户名
            if (!form.username || form.username.length < 3) {
              errors.username = '用户名至少需要3个字符'
              isValid = false
            }

            // 验证邮箱
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
            if (!form.email || !emailRegex.test(form.email)) {
              errors.email = '请输入有效的邮箱地址'
              isValid = false
            }

            // 验证密码
            if (!form.password || form.password.length < 6) {
              errors.password = '密码至少需要6个字符'
              isValid = false
            }

            return isValid
          }

          const handleSubmit = event => {
            console.log('表单提交事件触发')

            if (validateForm()) {
              submitMessage.value = '表单验证通过，提交成功！'
              submitSuccess.value = true
              console.log('表单数据：', form)
              // 返回true允许表单正常提交（这里我们阻止以便演示）
              event.preventDefault()
              return true
            } else {
              submitMessage.value = '表单验证失败，请检查输入'
              submitSuccess.value = false
              // 返回false阻止表单提交
              event.preventDefault()
              return false
            }
          }

          const resetForm = () => {
            form.username = ''
            form.email = ''
            form.password = ''
            Object.keys(errors).forEach(key => delete errors[key])
            submitMessage.value = ''
          }

          const handleLinkClick = (event, linkType) => {
            console.log(`点击了${linkType}链接`)

            switch (linkType) {
              case 'baidu':
                linkClickStatus.value = '百度链接：允许跳转'
                return true // 允许默认行为

              case 'google':
                const confirmJump = confirm('确定要跳转到Google吗？')
                if (confirmJump) {
                  linkClickStatus.value = 'Google链接：用户确认，允许跳转'
                  return true
                } else {
                  linkClickStatus.value = 'Google链接：用户取消，阻止跳转'
                  event.preventDefault()
                  return false
                }

              case 'example':
                linkClickStatus.value = 'Example链接：强制阻止跳转'
                event.preventDefault()
                return false // 阻止默认行为

              default:
                return true
            }
          }

          const handleContextMenu = event => {
            console.log('右键菜单事件触发')

            switch (contextMenuMode.value) {
              case 'allow':
                contextMenuStatus.value = '右键菜单：允许显示'
                return true // 允许显示默认右键菜单

              case 'block':
                contextMenuStatus.value = '右键菜单：已阻止'
                event.preventDefault()
                return false // 阻止显示右键菜单

              case 'custom':
                contextMenuStatus.value = '右键菜单：显示自定义菜单'
                event.preventDefault()
                alert('这里可以显示自定义右键菜单')
                return false

              default:
                return true
            }
          }

          return {
            form,
            errors,
            submitMessage,
            submitSuccess,
            linkClickStatus,
            contextMenuMode,
            contextMenuStatus,
            handleSubmit,
            resetForm,
            handleLinkClick,
            handleContextMenu
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
